<template>
	<div class="wrapper">

		<!-- header部分 -->
		<header>
			<p>商家信息</p>
			<!-- 返回键 -->
			<GoBackButton></GoBackButton>
		</header>
		<UpperBox></UpperBox>
		<!-- 商家logo部分 -->
		<div class="business-logo">
			<img :src="business.businessImg">
		</div>

		<!-- 商家信息部分 -->
		<div class="business-info">
			<h1>{{business.businessName}}</h1>
			<p>&#165;{{business.starPrice}}起送 &#165;{{business.deliveryPrice}}配送</p>
			<p>{{business.businessExplain}}</p>
		</div>

		<!-- 食品列表部分 -->
		<ul class="food">
			<li v-for="(item,index) in foodArr">
				<div class="food-left">
					<img :src="item.foodImg">
					<div class="food-left-info">
						<h3>{{item.foodName}}</h3>
						<p>{{item.foodExplain}}</p>
						<p>&#165;{{item.foodPrice}}</p>
					</div>
				</div>
				<div class="food-right">
					<i class="fa fa-edit" @click="editFood(item.foodId)"></i>
					<i class="fa fa-remove" @click="deleteFood(item.foodId)"></i>
				</div>
			</li>
		</ul>

		<!-- 增加食品 -->
		<div class="add-food">
			<div class="add-food-box">
				<i class="fa fa-plus-circle" @click="AddFoodInfo"></i>
				<span>增加食品</span>
			</div>
		</div>

		<!-- 修改商家信息 -->
		<div class="edit-business">
			<div class="edit-business-info" @click="EditBusinessInfo">
				<span>修改商家信息</span>
			</div>
		</div>

		<UnderBox></UnderBox>
		<!-- 底部菜单部分 -->
		<Footer></Footer>

	</div>
</template>

<script>
	import Footer from '../components/Footer.vue';
	import UnderBox from '../components/UnderBox.vue';
	import GoBackButton from '../components/GoBackButton.vue';
	import UpperBox from '../components/UpperBox.vue';
	

	export default {
		name: 'BusinessManagement',
		data() {
			return {
				business: {},
				foodArr: []
			}
		},
		created() {
			this.business = this.$getSessionStorage('business');

			//根据businessId查询商家信息
			//主要是获取商家图片
			this.$axios.get(
				'businesses/' + this.business.businessId
			).then(response => {
				this.business.businessImg = response.data.businessImg;
			}).catch(error => {
				console.error(error);
			});

			//根据businessId查询所属食品信息
			this.$axios.get('foods/business/' + this.business.businessId).then(response => {
				this.foodArr = response.data;
			}).catch(error => {
				console.error(error);
			});
		},
		methods: {
			EditBusinessInfo() {
				this.$router.push({
					path: '/editBusinessInfo'
				});
			},
			deleteFood(foodId) {
				//删除食物
				this.$axios.delete(
					'foods',
					{
						data: {
							foodId: foodId,
							businessId: this.business.businessId
						},
						headers:{ 'Content-Type' : "application/json"}
					}
				).then(response=>{
					let back = response.data;
					if(back==0){
						alert('删除失败！');
					}else{
						alert('删除成功！');
						this.$router.go(0);
					}
				}).catch(error=>{
					console.error(error);
				});
			},
			AddFoodInfo() {
				this.$router.push({
					path:'/addFood'
				});
			},
			editFood(foodId) {
				this.$router.push({
					path:'/editFood',
					query: {
						foodId: foodId
					}
				});
			}

		},
		components: {
			Footer,
			UnderBox,
			GoBackButton,
			UpperBox
		}
	}
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	/****************** 商家logo部分 ******************/
	.wrapper .business-logo {
		width: 100%;
		height: 35vw;
		/*使用上外边距避开header部分*/
		margin-top: 12vw;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wrapper .business-logo img {
		width: 40vw;
		height: 30vw;
		border-radius: 5px;
	}

	/****************** 商家信息部分 ******************/
	.wrapper .business-info {
		width: 100%;
		height: 20vw;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.wrapper .business-info h1 {
		font-size: 5vw;
	}

	.wrapper .business-info p {
		font-size: 3vw;
		color: #666;
		margin-top: 1vw;
	}

	/****************** 食品列表部分 ******************/
	.wrapper .food {
		width: 100%;
		/*使用下外边距避开footer部分*/
		/* margin-bottom: 14vw; */
	}

	.wrapper .food li {
		width: 100%;
		box-sizing: border-box;
		padding: 2.5vw;
		user-select: none;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .food li .food-left {
		display: flex;
		align-items: center;
	}

	.wrapper .food li .food-left img {
		width: 20vw;
		height: 20vw;
	}

	.wrapper .food li .food-left .food-left-info {
		margin-left: 3vw;
	}

	.wrapper .food li .food-left .food-left-info h3 {
		font-size: 3.8vw;
		color: #555;
	}

	.wrapper .food li .food-left .food-left-info p {
		font-size: 3vw;
		color: #888;
		margin-top: 2vw;
	}

	.wrapper .food li .food-right {
		width: 16vw;
		flex: 1;
		font-size: 5.6vw;
		color: #999;
		cursor: pointer;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.wrapper .food li .food-right p {
		font-size: 3.6vw;
		color: #333;
	}

	.wrapper .edit-business {
		width: 100%;
		height: 20vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wrapper .edit-business .edit-business-info {
		background-color: #7d73b0;
		width: 60%;
		height: 14vw;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 2vw;
	}

	.wrapper .edit-business .edit-business-info span {
		color: #ffffff;
		font-size: 5vw;
		font-family: "微软雅黑";
	}
	
	.wrapper .add-food {
		width: auto;
		height: 15vw;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: #DDDDDD 3vw solid;
	}
	
	.wrapper .add-food .add-food-box {
		display: flex;
		flex-direction: column;
	}
	
	.wrapper .add-food .add-food-box span {
		font-size: 5vw;
		font-family: "微软雅黑";
	}
	
	.wrapper .add-food .add-food-box .fa-plus-circle {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 7vw;
	}
</style>
